<template>
	<view class="cu-form-group">
		<view class="title">
			<text v-if="required" class="text-red margin-right-xs">*</text>
			{{ title }}</view
		>
		<picker @change="PickerChange" :value="selectIndex" :range="range" range-key="label">
			<view class="picker">
				{{ desc || placeholder }}
			</view>
		</picker>
	</view>
</template>
<script>
// const { request } = require("@/api/api");
import api from "utils/api";
export default {
	data() {
		return {
			initOptions: [],
			range: [],
			selectIndex: 0,
		};
	},
	created() {
		this.getOptions();
	},
	props: {
		title: {
			type: String,
			required: true,
		},
		required: {
			type: Boolean,
			required: true,
		},
		dicUrl: {
			type: String,
			required: true,
		},
		prop: {
			type: String,
			required: true,
		},
		desc: String,
		value: String,
		placeholder: String,
		props: {
			type: Object,
			required: true,
		},
	},
	methods: {
		getOptions() {
			api
				.request({
					url: this.dicUrl,
					method: "get",
				})
				.then(({ data }) => {
					let range = data.map((item) => ({
						label: item[this.props.label],
						value: item[this.props.value],
					}));
					if (this.value) {
						// 数据回显
						let index = range.findIndex((item) => item.value === this.value);
						this.$emit("change", range[index]);
						this.selectIndex = index;
					}
					this.range = range;
				});
		},
		PickerChange(e) {
			let index = e.detail.value;
			this.$emit("change", this.range[index]);
		},
	},
};
</script>

<style lang="scss">
/deep/ .uni-date__x-input {
	padding: 0;
}
.cu-modal.bottom-modal .cu-dialog {
	border-radius: 30rpx 30rpx 0 0;
}
button .cu-tag {
	position: absolute;
	top: 8upx;
	right: 8upx;
}

.scroll > view {
	position: relative;
}
.scroll > view > .clear-icon {
	position: absolute;
	top: 38rpx;
	right: 10rpx;
	z-index: 2;
}
.scroll > view::after {
	content: " ";
	width: 200%;
	height: 200%;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: inherit;
	transform: scale(0.5);
	transform-origin: 0 0;
	pointer-events: none;
	box-sizing: border-box;
	border-bottom: 1upx solid rgba(0, 0, 0, 0.1);
}
.cu-modal {
	z-index: 888;
}
.cu-form-group1 {
	background-color: #ffffff;
	padding: 0.5px 15px;
	display: flex;
	align-items: center;
	min-height: 52px;
	justify-content: space-between;
	text-align: right;
}
.cu-form-group1 .title {
	text-align: justify;
	padding-right: 15px;
	font-size: 15px;
	position: relative;
	height: 31px;
	line-height: 31px;
}
.cu-form-group input {
	font-size: 28upx;
}
</style>
